/**
 * 主题相关组合式函数
 */
import { ref, computed, watch, onMounted } from "vue";
import { THEMES, STORAGE_KEYS } from "@/constants";
import { storage } from "@/utils";

type Theme = "light" | "dark" | "auto";

export function useTheme() {
  const currentTheme = ref<Theme>("auto");
  const systemTheme = ref<"light" | "dark">("light");

  // 计算实际应用的主题
  const appliedTheme = computed(() => {
    if (currentTheme.value === "auto") {
      return systemTheme.value;
    }
    return currentTheme.value;
  });

  // 检测系统主题
  const detectSystemTheme = () => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    systemTheme.value = mediaQuery.matches ? "dark" : "light";
    return systemTheme.value;
  };

  // 应用主题到DOM
  const applyTheme = (theme: "light" | "dark") => {
    const html = document.documentElement;

    // 移除所有主题类
    html.classList.remove("light", "dark");

    // 添加当前主题类
    html.classList.add(theme);

    // 设置CSS变量
    if (theme === "dark") {
      html.style.setProperty("--el-color-primary", "#409EFF");
      html.style.setProperty("--el-bg-color", "#141414");
      html.style.setProperty("--el-bg-color-page", "#0a0a0a");
      html.style.setProperty("--el-text-color-primary", "#E5EAF3");
      html.style.setProperty("--el-text-color-regular", "#CFD3DC");
      html.style.setProperty("--el-text-color-secondary", "#A3A6AD");
      html.style.setProperty("--el-text-color-placeholder", "#8D9095");
      html.style.setProperty("--el-border-color", "#4C4D4F");
      html.style.setProperty("--el-border-color-light", "#414243");
      html.style.setProperty("--el-border-color-lighter", "#363637");
      html.style.setProperty("--el-border-color-extra-light", "#2B2B2C");
      html.style.setProperty("--el-fill-color", "#303133");
      html.style.setProperty("--el-fill-color-light", "#262727");
      html.style.setProperty("--el-fill-color-lighter", "#1D1D1F");
      html.style.setProperty("--el-fill-color-extra-light", "#191919");
      html.style.setProperty("--el-fill-color-blank", "#141414");
    } else {
      html.style.setProperty("--el-color-primary", "#409EFF");
      html.style.setProperty("--el-bg-color", "#FFFFFF");
      html.style.setProperty("--el-bg-color-page", "#F2F3F5");
      html.style.setProperty("--el-text-color-primary", "#303133");
      html.style.setProperty("--el-text-color-regular", "#606266");
      html.style.setProperty("--el-text-color-secondary", "#909399");
      html.style.setProperty("--el-text-color-placeholder", "#A8ABB2");
      html.style.setProperty("--el-border-color", "#DCDFE6");
      html.style.setProperty("--el-border-color-light", "#E4E7ED");
      html.style.setProperty("--el-border-color-lighter", "#EBEEF5");
      html.style.setProperty("--el-border-color-extra-light", "#F2F6FC");
      html.style.setProperty("--el-fill-color", "#F0F2F5");
      html.style.setProperty("--el-fill-color-light", "#F5F7FA");
      html.style.setProperty("--el-fill-color-lighter", "#FAFAFA");
      html.style.setProperty("--el-fill-color-extra-light", "#FAFCFF");
      html.style.setProperty("--el-fill-color-blank", "#FFFFFF");
    }
  };

  // 切换主题
  const toggleTheme = () => {
    const themes: Theme[] = ["light", "dark", "auto"];
    const currentIndex = themes.indexOf(currentTheme.value);
    const nextIndex = (currentIndex + 1) % themes.length;
    setTheme(themes[nextIndex]);
  };

  // 设置主题
  const setTheme = (theme: Theme) => {
    currentTheme.value = theme;
    storage.set(STORAGE_KEYS.THEME, theme);
  };

  // 获取主题图标
  const getThemeIcon = computed(() => {
    switch (currentTheme.value) {
      case "light":
        return "sunny";
      case "dark":
        return "moon";
      case "auto":
        return "desktop";
      default:
        return "desktop";
    }
  });

  // 获取主题名称
  const getThemeName = computed(() => {
    switch (currentTheme.value) {
      case "light":
        return "浅色模式";
      case "dark":
        return "深色模式";
      case "auto":
        return "跟随系统";
      default:
        return "跟随系统";
    }
  });

  // 初始化主题
  const initTheme = () => {
    // 从本地存储读取主题设置
    const savedTheme = storage.get<Theme>(STORAGE_KEYS.THEME);
    if (savedTheme && Object.values(THEMES).includes(savedTheme)) {
      currentTheme.value = savedTheme;
    }

    // 检测系统主题
    detectSystemTheme();

    // 监听系统主题变化
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    mediaQuery.addEventListener("change", (e) => {
      systemTheme.value = e.matches ? "dark" : "light";
    });

    // 应用初始主题
    applyTheme(appliedTheme.value);
  };

  // 监听主题变化
  watch(
    appliedTheme,
    (newTheme) => {
      applyTheme(newTheme);
    },
    { immediate: true },
  );

  // 组件挂载时初始化
  onMounted(() => {
    initTheme();
  });

  return {
    // 状态
    currentTheme: readonly(currentTheme),
    systemTheme: readonly(systemTheme),
    appliedTheme,

    // 计算属性
    getThemeIcon,
    getThemeName,

    // 方法
    toggleTheme,
    setTheme,
    detectSystemTheme,
    initTheme,
  };
}

// 全局主题管理
const globalTheme = useTheme();

export const useGlobalTheme = () => globalTheme;
